

/* Styling for the title (Month and Year) of the calendar */
div.title {
    font: x-large Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    height: 40px;
    background-color: white;
    color: black;
    }
/* Styling for the footer */
div.footer {
    font: small Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    }
/* Styling for the overall table */
table {
	position:relative;
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;

    }
/* Styling for the column headers (days of the week) */
th {
    /*padding: 0 0.5em;*/
    text-align: center;
    background-color:gray;
    color:white;
    }
/* Styling for the individual cells (days) */
td  {     
    font-size: medium;
 /*   padding: 0.25em 0.25em; */  
    width: 14%; 
    height: 60px;
    text-align: left;
    vertical-align: top;
    }
/* Styling for the date numbers */
.date  {     
    font-size: large;
    padding: 0.25em 0.25em;   
    text-align: left;
    vertical-align: top;
    }
   
.event2 {
    position: relative;
    height:20px;
    top: 10px;
    background-color: green;
    width: 208px;
    color: white;
}
.event1 {
    position: relative;
    height:20px;
    top: 10px;
    background-color: orange;
    width: 68px;
    color: white;
}
.eventLong {
    position: relative;
    height:20px;
    top: 10px;
    background-color: green;
    68px;
    color: white;
}
.event3 {
    position: relative;
    height:20px;
    top: 10px;
    background-color: rgb(0, 184, 255);
    width: 68px;
    color: white;
}
.event4 {
    position: relative;
    height:20px;
    top: 10px;
    background-color: rgb(92, 0, 255);
    width: 68px;
    color: white;
}

